<template>
	<view class="customers-wrap">
		<mescroll-uni ref="mescrollRef" @down="downCallback" :up="upOption" @up="getCustomers" @init="mescrollInit">
			<view class="pd" style='padding-top:20rpx'>
				<view class="customers-total">
					<view class="customers-num">
						<view class="item">{{customerSum?customerSum:0}}<text>人</text></view>
						<view class="item"><text>￥</text>{{agencyFeeSum?agencyFeeSum:'0'}}</view>
					</view>
					<view class="customers-explain">
						<view class="item">顾客总数</view>
						<view class="line"></view>
						<view class="item">贡献总金额</view>
					</view>
				</view>
			</view>
			<view class="pd">
				<view class="customers-search">
					<view class="row">
						<text class="label">微信昵称：</text>
						<input class="input" type="text" maxlength="30" v-model="nickName" placeholder="请输入微信昵称" placeholder-class="placeholder" />
						<view class="search-clear iconfont iconguanbi1" v-if="nickName" @tap="searchKeyClear('name')"></view>

					</view>
					<view class="row">
						<text class="label">加入时间：</text>
						<view class="input" @click="onShowDatePicker('beginDate')">
							<text class="gray-color" v-if="!beginDate">请选择时间</text>{{beginDate}}
						</view>
						<view class="search-clear iconfont iconguanbi1" v-if="beginDate" @tap="searchKeyClear('start')"></view>
						<i class="iconfont iconxiangyou" style="color:#ccc;"></i>
					</view>
					<view class="row">
						<text class="label"></text>
						<view class="input" @click="onShowDatePicker('endDate')">
							<text class="gray-color" v-if="!endDate">请选择时间</text>{{endDate}}
						</view>
						<view class="search-clear iconfont iconguanbi1" v-if="endDate" @tap="searchKeyClear('end')"></view>
						<i class="iconfont iconxiangyou" style="color:#ccc;"></i>
					</view>
					<view class="search-btn">
						<tui-button type="danger" width="500rpx" height="80rpx" :size="26" shape="circle" @tap="getCustomers({num:1,size:10})">查询</tui-button>
					</view>
				</view>
			</view>
			<view class="pd sticky-box">
				<view class="head">
					<view class="cell len3" style="padding-left: 10rpx;">微信头像</view>
					<view class="cell">微信昵称</view>
					<view class="cell len1">加入时间</view>
					<view class="cell len1">贡献提成</view>
					<view class="cell len2 text-c">电话</view>
				</view>
			</view>
			<view class="pd">
				<view class="customers-list">
					<view class="row" v-for="item in customersList" @tap="jumpToDetail(item)">
						<view class="cell len3">
							<image class="avatar" :src="item.headimgurl" mode="aspectFit"></image>
						</view>
						<view class="cell ellipsis">{{item.nickName?item.nickName:''}}</view>
						<view class="cell len1">{{item.createTime?item.createTime:''}}</view>
						<view class="cell redcolor len1">￥{{item.agencyFee?item.agencyFee:'0'}}</view>
						<view class="cell len1 text-c">{{item.userMobile?item.userMobile:''}}</view>
					</view>
				</view>
			</view>
		</mescroll-uni>
		<mx-date-picker :show="showPicker" :color="color" :type="dateType" :value="dateValue" :show-tips="true"
			:show-seconds="true" @confirm="onSelected" @cancel="onSelected" />
		<tui-modal></tui-modal>
	</view>
</template>

<script>
	import tuiButton from "@/components/button/button"
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import MxDatePicker from "@/components/mx-datepicker/mx-datepicker.vue";
	export default {
		components: {
			tuiButton,
			MxDatePicker,
		},
		mixins: [MescrollMixin],
		data() {
			// const currentDate = this.getDate({
			// 	format: true
			// })
			return {
				customerSum: 0,
				agencyFeeSum: 0.00,
				nickName: '',
				
				customersList: [],
				upOption: {
					auto: false, // 是否自动加载
					page: {
						size: 10 // 每页数据的数量,默认6
					},
					noMoreSize: 10, // 配置列表的总数量要大于等于5条才显示'-- 暂无更多信息 --'的提示
				},
				height: 0,
				
				beginDate:'',
				endDate:'', 
				showPicker: false,
				dateType: 'rangetime',
				color: '#EA655E',
				dateValue: '',
			};
		},
		beforeCreate() {
			Date.prototype.Format = function(fmt) { //author: meizz
				var o = {
					"M+": this.getMonth() + 1, //月份 
					"d+": this.getDate(), //日 
					"h+": this.getHours(), //小时 
					"m+": this.getMinutes(), //分 
					"s+": this.getSeconds(), //秒 
					"q+": Math.floor((this.getMonth() + 3) / 3), //季度 
					"S": this.getMilliseconds() //毫秒 
				};
				if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1
					.length));
				for (var k in o)
					if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[
						k]) : (("00" + o[
						k]).substr(("" + o[k]).length)));
				return fmt;
			}
		},
		onLoad(options) {
			// #ifdef H5
			   this.$wechat.noShare();
			// #endif
			console.log(this.$refs.customersTable);
			const query = uni.createSelectorQuery().in(this);

			uni.getSystemInfo({
				success: (res) => {
					this.height = 750 / uni.upx2px(750) * (res.windowHeight - uni.upx2px(660))
				}
			});
		},
		methods: {
			getCustomers(page) {
				const params = {
					current: page.num,
					pageSize: page.size,
					nickName: this.nickName,
					createTimeStart: this.beginDate,
					createTimeEnd: this.endDate,
					
				};
				this.$http.myCustomers(params).then((res) => {
					if (res.status === 0) {
						this.customerSum = res.data.customerSum;
						this.agencyFeeSum = res.data.agencyFeeSum;
						let curPageData = res.data.records;
						if(curPageData.length>0){
							curPageData.forEach(item=>{
								if(item.createTime&&item.createTime.indexOf(' ')>0){
									item.createTime=item.createTime.split(' ')[0]
								}
							})
						}
						this.mescroll.endSuccess(res.data.records.length);
						if (page.num == 1) {
							this.customersList = []
						};
						this.customersList = this.customersList.concat(curPageData);

					}
				})
			},
			onShowDatePicker(type) { //显示
		
				this.dateType = type;
				this.dateValue = this[type];
				this.showPicker = true;
			},
			onSelected(e, key) { //选择
				this.showPicker = false;
				if (e.value) {
					this[this.dateType] = new Date(e.value).Format('yyyy-MM-dd');
					if(this.beginDate&&this.endDate){
						let beginTime=new Date(this.beginDate.replace(/\-/g, '/')).getTime();
						let endTime=new Date(this.endDate.replace(/\-/g, '/')).getTime();
						if(beginTime>endTime){
							if(this.dateType==='beginDate'){
								uni.showToast({
									title: "开始时间不能大于结束时间",
									icon: "none",
									duration: 1000
								})
							}else{
								uni.showToast({
									title: "结束时间不能小于开始时间",
									icon: "none",
									duration: 1000
								})
							}
							this[this.dateType]='';
						}
						
					}
					//选择的值
					console.log('value => ' + e.value);
					//原始的Date对象
					console.log('date => ' + e.date);
				}else{
					this[this.dateType]='';
				}
			},
			searchKeyClear(type) {
				if (type === 'name') {
					this.nickName = '';
				} else if (type === 'start') {
					this.beginDate = '';
				} else if (type === 'end') {
					this.endDate = '';
				}
			},
			jumpToDetail(item) {
				let customerUserId = item.customerUserId
				uni.navigateTo({
					url: `commission?customerUserId=${customerUserId}&type=customers`
				})
			}
		},
	}
</script>

<style lang="scss">
	.customers-wrap {
		width: 100%;
		height: 100vh;
		box-sizing: border-box;

		.pd {
			padding: 0 20rpx;
		}

		.customers-total {
			width: 100%;
			height: 170rpx;
			background: url(../../../static/img/loginbg.png) no-repeat center center;
			background-size: 100%;
			border-radius: 8rpx;
			color: #fff;
			opacity: 0.8;

			.customers-num {
				height: 90rpx;
				line-height: 90rpx;
				display: flex;

				.item {
					width: 50%;
					text-align: center;
					font-size: 48rpx;

					text {
						font-size: 28rpx;
					}
				}
			}

			.customers-explain {
				height: 80rpx;
				line-height: 80rpx;
				display: flex;
				background: rgba(255, 255, 255, .1);
				font-size: 28rpx;
				position: relative;
				opacity: 0.9;

				.item {
					width: 50%;
					text-align: center;
					color: #eee;
				}

				.line {
					width: 2rpx;
					height: 50rpx;
					position: absolute;
					left: 50%;
					top: 20rpx;
					background: #eee;
				}
			}
		}

		.customers-search {
			width: 100%;
			border-radius: 8rpx;
			background-color: #fff;
		}

		.customers-search {
			margin: 16rpx 0;
			padding: 10rpx 20rpx 20rpx 30rpx;
			font-size: 28rpx;
			color: #353535;

			.row {
				width: 100%;
				display: flex;
				line-height: 74rpx;
				height: 74rpx;
				border-bottom: 2rpx solid $borderColor;

				.label {
					width: 140rpx;
					text-align: right;
					margin-right: 10rpx;
				}
				.input {
					flex: 1;
					height: 74rpx;
					font-size: 28rpx !important;
					.gray-color{
						color: #ccc ;
					}
				}

				.search-clear {
					color: rgb(204, 204, 204);
					padding: 10rpx;
				}
			}

			.search-btn {
				margin: 16rpx auto 0;
				width: 500rpx;
			}
		}

		.mescroll-empty {
			padding-bottom: 80rpx;
			padding-top: 80rpx;
		}

		.cell {
			width: 18%;
			text-align: left;
			float: left;

			&.text-c {
				text-align: center;
			}
		}

		.len1 {
			width: 20%;
		}

		.len2 {
			width: 26%;
		}

		.len3 {
			width: 16%;
		}

		.sticky-box {
			/* #ifndef APP-PLUS-NVUE */
			display: flex;
			position: -webkit-sticky;
			/* #endif */
			position: sticky;
			top: 0rpx;
			z-index: 990;
			
		}

		.head {
			width: 100%;
			line-height: 90rpx;
			height: 90rpx;
			border-bottom: 1rpx solid #ddd;
			border-top: 2rpx solid $borderColor;
			flex-direction: row;
			font-size: 24rpx;
			background-color: #fff;
		}

		.customers-list {
			width: 100%;

			.row {
				width: 100%;
				float: left;
				border-bottom: 1rpx solid #ddd;
				padding: 10rpx 0;
				font-size: 24rpx;
				background-color: #fff;
				.avatar {
					width: 80rpx;
					height: 80rpx;
					display: block;
					border-radius: 50%;
					overflow: hidden;
					margin-left: 5%;
				}

				.redcolor {
					color: $red;
				}
			}
		}
	}
</style>
